<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 1.引入 elemntui样式 我这里引用的是远程的，需要联网-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
<!-- 用id=app 指明vue作用域-->
<div id="app">

    <div>
        <el-divider></el-divider>
        <el-checkbox label="7.axios体验:点击查询用户 请求地址:http://jsonplaceholder.typicode.com/users GET请求"></el-checkbox>
        <el-button type="primary" @click="douban">ajax获取</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="180">
            </el-table-column>
        </el-table>
    </div>

</div>
<!-- 2.引入 vue.js -->
<script src="js/vue.js"></script>
<!-- 3.引入 axios 异步请求工具 -->
<script src="js/axios.js"></script>
<!-- 4.引入 elemntui相关的js,处理响应特效的 我这里引用的是远程的，需要联网 -->
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>

<script>
    //固定语法，new Vue({}) 在大括号里面写代码
    new Vue({
        //5.指明vue作用域  <div id="app"></div>
        el: '#app',
        //6.数据区
        data() {
            return {
                tableData: ''
            }
        },
        methods: {
            douban() {
                axios
                    .get('http://jsonplaceholder.typicode.com/users')
                    .then(response => {
                        this.tableData = response.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }

        }
    })
</script>
</body>
</html>